<template>
  <div>
    <el-button @click="get_spec_list" style="width: 100%" type="success" plain :loading="is_loading_btn_get_spec_list">
      刷新SPEC文件列表
    </el-button>
    <div style="height: 5px"></div>
    <el-select
        v-model="spec_file_list"
        multiple
        clearable
        collapse-tags
        collapse-tags-tooltip
        placeholder="选择要显示SPEC"
        style="width: 100%"
    >
      <el-option v-for="item in spec_file_list_all" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <div v-for="(v, k) in spec_file_list" :key="k">
      <readerForSPEC :titleSPEC="v" :spec_path="v" :sessionToken="sessionToken" searchKeyWord="%changelog"
                     :colorIdx="color_lists[Math.floor(Math.random() * color_lists.length)]"></readerForSPEC>
    </div>
  </div>
</template>

<script>
import readerForSPEC from "@/components/readerForSPEC_EditorMirror"
import axios from 'axios'

export default {
  name: "sessionSpecManage",
  components: {
    readerForSPEC
  },
  props: {
    sessionToken: String
  },
  data() {
    return {
      spec_file_list: [],
      spec_file_list_all: [],
      color_lists: [
        'hsl(42, 48%, 54%)',
        'hsl(138, 24%, 48%)',
        'rgb(200, 138, 131)',
        'rgb(84, 221, 226)',
        'rgb(178, 199, 168)',
        'rgb(16, 195, 195)',
        'hsl(0, 21%, 68%)',
        'rgb(226, 166, 198)',
        'hsl(278, 17%, 66%)',
        'rgb(153, 199, 235)',
      ],
      is_loading_btn_get_spec_list: false,
    }
  },
  methods: {
    get_spec_list() {  // 获取一个sessionToken
      let obj_this = this
      obj_this.is_loading_btn_get_spec_list = true
      let data = {"session_token": obj_this.sessionToken}
      axios.post('/get_spec_list_by_session_token', data).then(function (response) {
        obj_this.spec_file_list_all = response.data.data
        obj_this.is_loading_btn_get_spec_list = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
  },
  created() {
    this.get_spec_list()
  }
}
</script>

<style scoped>

</style>